<template>
  <div>
    <!-- home 轮播图 -->
      <my-swipe :url="lunboUrl"></my-swipe>
    <!-- home 九宫格 -->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link  :to="{name:'news.list'}">
            <span class="mui-icon mui-icon-home"></span>
            <div class="mui-media-body">新闻资讯</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link :to="{name:'photo.share'}">
            <span class="mui-icon mui-icon-email"></span>
            <div class="mui-media-body">图文分享</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link :to="{name:'goods.list'}">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <div class="mui-media-body">商品展示</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link :to="{name:'goods.list'}">
            <span class="mui-icon mui-icon-location"></span>
            <div class="mui-media-body">留言反馈</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a>
            <span class="mui-icon mui-icon-search"></span>
            <div class="mui-media-body">搜搜资讯</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a>
            <span class="mui-icon mui-icon-phone"></span>
            <div class="mui-media-body">联系我们</div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imgs: [],
        lunboUrl:"./src/dataJson/swiper-img.json",
      };
    },
    created() {
      this.$ajax.get(this.lunboUrl).then(res => {
        this.imgs = res.data;
        console.log(res.data);
      }).catch(err=>{
        console.log(err);
        
      });
    }
  };
</script>

<style scoped>
 
  
  
  /*九宫格样式*/
  
  .mui-content>.mui-table-view:first-child {
    margin-top: 0;
  }
  
  .mui-table-view.mui-grid-view.mui-grid-9 {
    background-color: white;
  }
  
  .mui-table-view.mui-grid-view.mui-grid-9 li {
    border: 0;
  }
  
  
  /*清除九宫格字体图标*/
  
  .mui-icon-home:before,
  .mui-icon-email:before,
  .mui-icon-chatbubble:before,
  .mui-icon-location:before,
  .mui-icon-search:before,
  .mui-icon-phone:before {
    content: "";
  }
  
  
  /*九宫格背景图片 */
  
  .mui-icon-home {
    background-image: url('../../static/img/news.png');
    background-repeat: round;
  }
  
  .mui-icon-email {
    background-image: url('../../static/img/picShare.png');
    background-repeat: round;
  }
  
  .mui-icon-chatbubble {
    background-image: url('../../static/img/goodShow.png');
    background-repeat: round;
  }
  
  .mui-icon-location {
    background-image: url('../../static/img/feedback.png');
    background-repeat: round;
  }
  
  .mui-icon-search {
    background-image: url('../../static/img/search.png');
    background-repeat: round;
  }
  
  .mui-icon-phone {
    background-image: url('../../static/img/callme.png');
    background-repeat: round;
  }
  
  
  /* 九宫格图片宽高 */
  
  .mui-icon {
    height: 50px;
    width: 50px;

  }
  
  
  /*九宫格背景图片*/
</style>